<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的处理</title>
</head>
<body>
<div id="change" class="change">
    <h1>{{ count }}</h1>
    <button>-</button>
    <button>+</button>
</div>

<script !src="">
    let count = 0;

    // step1. 调整显示的内容为 初始值
    let element = document.querySelector("#change >h1");
    element.innerText = count

    // 获取 - 按钮
    let decreaseButton = document.querySelector("#change > button:nth-child(2)");
    console.log(decreaseButton);

    decreaseButton.onclick = function () {
        count--
        element.innerText = count
    }

    // 获取 - 按钮
    let increaseButton = document.querySelector("#change > button:nth-child(3)");
    increaseButton.addEventListener("click", function () {
        count++
        element.innerText = count
    })

</script>
</body>
</html>